.main {
    background: url('../../images/cities/map.png');
    width: 789px;
    height: 312px;
    position: relative;
}

.title {
    background: url('../../images/cities/map_logo_new.png');
    width: 788px;
    height: 311px;
}

.main > *:not(.title) {
    cursor: pointer;
    position: absolute;
}

.exchange {
    bottom: 7px;
    left: 11px;
}

.exchange > a {
    display: inline-block;
    width: 202px;
    height: 154px;
}

.main > .exchange:hover {
    background: url('../../images/cities/1.png');
}

.pasture {
    top: 0;
    left: 0;
}

.pasture > a {
    display: inline-block;
    width: 110px;
    height: 74px;
}

.pasture:hover {
    background: url('../../images/cities/2.png');
}

.mystery {
    top: 20px;
    left: 183px;
}

.mystery > a {
    display: inline-block;
    width: 221px;
    height: 200px;
}

.mystery:hover {
    background: url('../../images/cities/3.png');
}

.warehouse {
    top: 0;
    right: 312px;
}

.warehouse > a {
    display: inline-block;
    width: 150px;
    height: 141px;
}

.warehouse:hover {
    background: url('../../images/cities/4.png');
}

.prop {
    right: 123px;
    top: 0;
}

.prop > a {
    display: inline-block;
    width: 190px;
    height: 137px;
}

.prop:hover {
    background: url('../../images/cities/5.png');
}

.smithy {
    width: 142px;
    height: 162px;
    right: 0;
    top: 0;
}

.smithy:hover {
    background: url('../../images/cities/6.png');
}

.palace {
    width: 286px;
    height: 178px;
    right: 0;
    bottom: 19px;
}

.palace:hover {
    background: url('../../images/cities/7.png');
}

.notice {
    width: 61px;
    height: 87px;
    bottom: 80px;
    right: 270px;
}

.notice:hover {
    background: url('../../images/cities/8.png');
}

.r-next {
    background: url('../../images/cities/next.png');
    right: 0;
    top: 125px;
    animation: next 400ms linear infinite alternate;
}

.r-next > a {
    display: inline-block;
    width: 59px;
    height: 41px;
}

@keyframes next {
    from {right: 0;}
    to {right: 20px;}
}